
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon icon icon-arrow-circle-o-down"></i>
                    <div class="name">下箭头-圆形</div>
                    <div class="fontclass">.icon-arrow-circle-o-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-circle-o-top"></i>
                    <div class="name">上箭头-圆形</div>
                    <div class="fontclass">.icon-arrow-circle-o-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-circle-o-right"></i>
                    <div class="name">右箭头-圆形</div>
                    <div class="fontclass">.icon-arrow-circle-o-right</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-circle-o-left"></i>
                    <div class="name">左箭头-圆形</div>
                    <div class="fontclass">.icon-arrow-circle-o-left</div>
                </li>
            
                <li>
                <i class="icon icon icon-chevron-circle-left"></i>
                    <div class="name">箭头-左</div>
                    <div class="fontclass">.icon-chevron-circle-left</div>
                </li>
            
                <li>
                <i class="icon icon icon-chevron-circle-down"></i>
                    <div class="name">箭头-下</div>
                    <div class="fontclass">.icon-chevron-circle-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-chevron-circle-top"></i>
                    <div class="name">箭头-上</div>
                    <div class="fontclass">.icon-chevron-circle-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-chevron-circle-right"></i>
                    <div class="name">箭头-右</div>
                    <div class="fontclass">.icon-chevron-circle-right</div>
                </li>
            
                <li>
                <i class="icon icon icon-chevron-down"></i>
                    <div class="name">箭头-向下</div>
                    <div class="fontclass">.icon-chevron-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-chevron-right"></i>
                    <div class="name">箭头-向右</div>
                    <div class="fontclass">.icon-chevron-right</div>
                </li>
            
                <li>
                <i class="icon icon icon-chevron-left"></i>
                    <div class="name">箭头-向左</div>
                    <div class="fontclass">.icon-chevron-left</div>
                </li>
            
                <li>
                <i class="icon icon icon-chevron-top"></i>
                    <div class="name">箭头-向上</div>
                    <div class="fontclass">.icon-chevron-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-caret-up"></i>
                    <div class="name">箭头-向上</div>
                    <div class="fontclass">.icon-caret-up</div>
                </li>
            
                <li>
                <i class="icon icon icon-caret-left"></i>
                    <div class="name">箭头-向左</div>
                    <div class="fontclass">.icon-caret-left</div>
                </li>
            
                <li>
                <i class="icon icon icon-caret-down"></i>
                    <div class="name">箭头-向下</div>
                    <div class="fontclass">.icon-caret-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-caret-top"></i>
                    <div class="name">箭头-向上</div>
                    <div class="fontclass">.icon-caret-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-sort-top"></i>
                    <div class="name">排序-向上</div>
                    <div class="fontclass">.icon-sort-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-sort-down"></i>
                    <div class="name">排序-向下</div>
                    <div class="fontclass">.icon-sort-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-sort"></i>
                    <div class="name">排序-默认</div>
                    <div class="fontclass">.icon-sort</div>
                </li>
            
                <li>
                <i class="icon icon icon-long-arrow-top"></i>
                    <div class="name">向上</div>
                    <div class="fontclass">.icon-long-arrow-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-long-arrow-down"></i>
                    <div class="name">向上</div>
                    <div class="fontclass">.icon-long-arrow-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-long-arw-down"></i>
                    <div class="name">箭头-向下</div>
                    <div class="fontclass">.icon-long-arw-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-long-arw-top"></i>
                    <div class="name">箭头-向上</div>
                    <div class="fontclass">.icon-long-arw-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-lg-arw-down"></i>
                    <div class="name">箭头-向下</div>
                    <div class="fontclass">.icon-lg-arw-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-lg-arw-top"></i>
                    <div class="name">箭头-向上</div>
                    <div class="fontclass">.icon-lg-arw-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-circle-right"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow-circle-right</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-circle-down"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow-circle-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-circle-top"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow-circle-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-circle-left"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow-circle-left</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-right"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow-right</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-down"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-left"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow-left</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrow-top"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-change-right"></i>
                    <div class="name">交换-右</div>
                    <div class="fontclass">.icon-change-right</div>
                </li>
            
                <li>
                <i class="icon icon icon-change-left"></i>
                    <div class="name">交换-向左</div>
                    <div class="fontclass">.icon-change-left</div>
                </li>
            
                <li>
                <i class="icon icon icon-change-left-right"></i>
                    <div class="name">交换-相互</div>
                    <div class="fontclass">.icon-change-left-right</div>
                </li>
            
                <li>
                <i class="icon icon icon-last-page"></i>
                    <div class="name">翻页-末页</div>
                    <div class="fontclass">.icon-last-page</div>
                </li>
            
                <li>
                <i class="icon icon icon-first-page"></i>
                    <div class="name">翻页-首页</div>
                    <div class="fontclass">.icon-first-page</div>
                </li>
            
                <li>
                <i class="icon icon icon-page-last"></i>
                    <div class="name">翻页-末页</div>
                    <div class="fontclass">.icon-page-last</div>
                </li>
            
                <li>
                <i class="icon icon icon-page-first"></i>
                    <div class="name">翻页-首页</div>
                    <div class="fontclass">.icon-page-first</div>
                </li>
            
                <li>
                <i class="icon icon icon-p-last"></i>
                    <div class="name">翻页-末页</div>
                    <div class="fontclass">.icon-p-last</div>
                </li>
            
                <li>
                <i class="icon icon icon-p-first"></i>
                    <div class="name">翻页-首页</div>
                    <div class="fontclass">.icon-p-first</div>
                </li>
            
                <li>
                <i class="icon icon icon-zhifubao"></i>
                    <div class="name">支付宝</div>
                    <div class="fontclass">.icon-zhifubao</div>
                </li>
            
                <li>
                <i class="icon icon icon-weixin"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin</div>
                </li>
            
                <li>
                <i class="icon icon icon-pengyouquan"></i>
                    <div class="name">朋友圈</div>
                    <div class="fontclass">.icon-pengyouquan</div>
                </li>
            
                <li>
                <i class="icon icon icon-zhifubao1"></i>
                    <div class="name">支付宝</div>
                    <div class="fontclass">.icon-zhifubao1</div>
                </li>
            
                <li>
                <i class="icon icon icon-sina"></i>
                    <div class="name">新浪</div>
                    <div class="fontclass">.icon-sina</div>
                </li>
            
                <li>
                <i class="icon icon icon-mac"></i>
                    <div class="name">mac</div>
                    <div class="fontclass">.icon-mac</div>
                </li>
            
                <li>
                <i class="icon icon icon-windows"></i>
                    <div class="name">windows</div>
                    <div class="fontclass">.icon-windows</div>
                </li>
            
                <li>
                <i class="icon icon icon-android"></i>
                    <div class="name">android</div>
                    <div class="fontclass">.icon-android</div>
                </li>
            
                <li>
                <i class="icon icon icon-weixin1"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin1</div>
                </li>
            
                <li>
                <i class="icon icon icon-weixin2"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin2</div>
                </li>
            
                <li>
                <i class="icon icon icon-zhifubao2"></i>
                    <div class="name">支付宝</div>
                    <div class="fontclass">.icon-zhifubao2</div>
                </li>
            
                <li>
                <i class="icon icon icon-radio-on"></i>
                    <div class="name">单选-选中</div>
                    <div class="fontclass">.icon-radio-on</div>
                </li>
            
                <li>
                <i class="icon icon icon-radio"></i>
                    <div class="name">单选</div>
                    <div class="fontclass">.icon-radio</div>
                </li>
            
                <li>
                <i class="icon icon icon-radio-fill"></i>
                    <div class="name">单选-fill</div>
                    <div class="fontclass">.icon-radio-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-checkbox"></i>
                    <div class="name">checkbox</div>
                    <div class="fontclass">.icon-checkbox</div>
                </li>
            
                <li>
                <i class="icon icon icon-checkbox-on"></i>
                    <div class="name">checkbox</div>
                    <div class="fontclass">.icon-checkbox-on</div>
                </li>
            
                <li>
                <i class="icon icon icon-checkbox-on-fill"></i>
                    <div class="name">checkbox-fill</div>
                    <div class="fontclass">.icon-checkbox-on-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-checkbox1"></i>
                    <div class="name">checkbox</div>
                    <div class="fontclass">.icon-checkbox1</div>
                </li>
            
                <li>
                <i class="icon icon icon-checkbox-on1"></i>
                    <div class="name">checkbox-选中</div>
                    <div class="fontclass">.icon-checkbox-on1</div>
                </li>
            
                <li>
                <i class="icon icon icon-jia"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.icon-jia</div>
                </li>
            
                <li>
                <i class="icon icon icon-jian"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-jian</div>
                </li>
            
                <li>
                <i class="icon icon icon-plus-fill"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.icon-plus-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-minus-fill"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-minus-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-plus-square"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.icon-plus-square</div>
                </li>
            
                <li>
                <i class="icon icon icon-minus-square"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-minus-square</div>
                </li>
            
                <li>
                <i class="icon icon icon-jia-square"></i>
                    <div class="name">加</div>
                    <div class="fontclass">.icon-jia-square</div>
                </li>
            
                <li>
                <i class="icon icon icon-jian-square"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-jian-square</div>
                </li>
            
                <li>
                <i class="icon icon icon-jia-fangkuang"></i>
                    <div class="name">加-方框</div>
                    <div class="fontclass">.icon-jia-fangkuang</div>
                </li>
            
                <li>
                <i class="icon icon icon-jian-fangkuang"></i>
                    <div class="name">减-方框</div>
                    <div class="fontclass">.icon-jian-fangkuang</div>
                </li>
            
                <li>
                <i class="icon icon icon-close"></i>
                    <div class="name">错误、关闭、取消</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon icon icon-close-fill"></i>
                    <div class="name">错误、关闭、取消-圆框</div>
                    <div class="fontclass">.icon-close-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-close-circle"></i>
                    <div class="name">错误、关闭、取消-线性圆框</div>
                    <div class="fontclass">.icon-close-circle</div>
                </li>
            
                <li>
                <i class="icon icon icon-close-square"></i>
                    <div class="name">错误、关闭、取消-线性方框</div>
                    <div class="fontclass">.icon-close-square</div>
                </li>
            
                <li>
                <i class="icon icon icon-close-square1"></i>
                    <div class="name">错误、关闭、取消-方框</div>
                    <div class="fontclass">.icon-close-square1</div>
                </li>
            
                <li>
                <i class="icon icon icon-success"></i>
                    <div class="name">正确、完成</div>
                    <div class="fontclass">.icon-success</div>
                </li>
            
                <li>
                <i class="icon icon icon-scuuess-circle"></i>
                    <div class="name">正确、完成-线性圆框</div>
                    <div class="fontclass">.icon-scuuess-circle</div>
                </li>
            
                <li>
                <i class="icon icon icon-success-fill"></i>
                    <div class="name">正确、完成-圆框</div>
                    <div class="fontclass">.icon-success-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-info-circle"></i>
                    <div class="name">信息</div>
                    <div class="fontclass">.icon-info-circle</div>
                </li>
            
                <li>
                <i class="icon icon icon-info-fill"></i>
                    <div class="name">信息</div>
                    <div class="fontclass">.icon-info-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-doubt-circle"></i>
                    <div class="name">问号</div>
                    <div class="fontclass">.icon-doubt-circle</div>
                </li>
            
                <li>
                <i class="icon icon icon-doubt-fill"></i>
                    <div class="name">问号</div>
                    <div class="fontclass">.icon-doubt-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-plaint-circle"></i>
                    <div class="name">感叹号-线性圆框</div>
                    <div class="fontclass">.icon-plaint-circle</div>
                </li>
            
                <li>
                <i class="icon icon icon-plaint-fill"></i>
                    <div class="name">感叹号-圆框</div>
                    <div class="fontclass">.icon-plaint-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-plaint-new"></i>
                    <div class="name">感叹号</div>
                    <div class="fontclass">.icon-plaint-new</div>
                </li>
            
                <li>
                <i class="icon icon icon-plaint-new-fill"></i>
                    <div class="name">感叹号</div>
                    <div class="fontclass">.icon-plaint-new-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-home"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon icon icon-home-fill"></i>
                    <div class="name">首页-选中</div>
                    <div class="fontclass">.icon-home-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-index"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-index</div>
                </li>
            
                <li>
                <i class="icon icon icon-index-fill"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-index-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-my"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-my</div>
                </li>
            
                <li>
                <i class="icon icon icon-my-fill"></i>
                    <div class="name">我的-选中</div>
                    <div class="fontclass">.icon-my-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-mine"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-mine</div>
                </li>
            
                <li>
                <i class="icon icon icon-mine-fill"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-mine-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-user"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon icon icon-user-fill"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-user-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon icon icon-search-fill"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-cart-fill"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-cart-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-cart"></i>
                    <div class="name">采购-线性</div>
                    <div class="fontclass">.icon-cart</div>
                </li>
            
                <li>
                <i class="icon icon icon-set"></i>
                    <div class="name">设置-线性</div>
                    <div class="fontclass">.icon-set</div>
                </li>
            
                <li>
                <i class="icon icon icon-set-fill"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-set-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-msg"></i>
                    <div class="name">消息-线性</div>
                    <div class="fontclass">.icon-msg</div>
                </li>
            
                <li>
                <i class="icon icon icon-msg-fill"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-msg-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-mail"></i>
                    <div class="name">mail</div>
                    <div class="fontclass">.icon-mail</div>
                </li>
            
                <li>
                <i class="icon icon icon-mail-fill"></i>
                    <div class="name">mail</div>
                    <div class="fontclass">.icon-mail-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-message"></i>
                    <div class="name">message</div>
                    <div class="fontclass">.icon-message</div>
                </li>
            
                <li>
                <i class="icon icon icon-message-fill"></i>
                    <div class="name">message</div>
                    <div class="fontclass">.icon-message-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-shop-fill"></i>
                    <div class="name">店铺-fill</div>
                    <div class="fontclass">.icon-shop-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-shop"></i>
                    <div class="name">店铺</div>
                    <div class="fontclass">.icon-shop</div>
                </li>
            
                <li>
                <i class="icon icon icon-out"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-out</div>
                </li>
            
                <li>
                <i class="icon icon icon-refresh"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-refresh</div>
                </li>
            
                <li>
                <i class="icon icon icon-synchro"></i>
                    <div class="name">同步</div>
                    <div class="fontclass">.icon-synchro</div>
                </li>
            
                <li>
                <i class="icon icon icon-gotop"></i>
                    <div class="name">回顶部</div>
                    <div class="fontclass">.icon-gotop</div>
                </li>
            
                <li>
                <i class="icon icon icon-filter"></i>
                    <div class="name">筛选过滤</div>
                    <div class="fontclass">.icon-filter</div>
                </li>
            
                <li>
                <i class="icon icon icon-tel"></i>
                    <div class="name">电话-线性圆框</div>
                    <div class="fontclass">.icon-tel</div>
                </li>
            
                <li>
                <i class="icon icon icon-more"></i>
                    <div class="name">更多-横向</div>
                    <div class="fontclass">.icon-more</div>
                </li>
            
                <li>
                <i class="icon icon icon-sound-fill"></i>
                    <div class="name">麦克风</div>
                    <div class="fontclass">.icon-sound-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-phone"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-phone</div>
                </li>
            
                <li>
                <i class="icon icon icon-rel-fill"></i>
                    <div class="name">电话-圆框</div>
                    <div class="fontclass">.icon-rel-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-sound"></i>
                    <div class="name">麦克风-线性</div>
                    <div class="fontclass">.icon-sound</div>
                </li>
            
                <li>
                <i class="icon icon icon-more-col"></i>
                    <div class="name">更多-竖向</div>
                    <div class="fontclass">.icon-more-col</div>
                </li>
            
                <li>
                <i class="icon icon icon-time-fill"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-time-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-time"></i>
                    <div class="name">时间-线性</div>
                    <div class="fontclass">.icon-time</div>
                </li>
            
                <li>
                <i class="icon icon icon-money"></i>
                    <div class="name">财务</div>
                    <div class="fontclass">.icon-money</div>
                </li>
            
                <li>
                <i class="icon icon icon-money1"></i>
                    <div class="name">财务-线性</div>
                    <div class="fontclass">.icon-money1</div>
                </li>
            
                <li>
                <i class="icon icon icon-safe-fill"></i>
                    <div class="name">安全、保障</div>
                    <div class="fontclass">.icon-safe-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-safe"></i>
                    <div class="name">安全、保障-线性</div>
                    <div class="fontclass">.icon-safe</div>
                </li>
            
                <li>
                <i class="icon icon icon-photo-fill"></i>
                    <div class="name">拍照</div>
                    <div class="fontclass">.icon-photo-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-photo"></i>
                    <div class="name">拍照-线性</div>
                    <div class="fontclass">.icon-photo</div>
                </li>
            
                <li>
                <i class="icon icon icon-date"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-date</div>
                </li>
            
                <li>
                <i class="icon icon icon-Scan"></i>
                    <div class="name">扫描</div>
                    <div class="fontclass">.icon-Scan</div>
                </li>
            
                <li>
                <i class="icon icon icon-menu"></i>
                    <div class="name">列表视图、菜单</div>
                    <div class="fontclass">.icon-menu</div>
                </li>
            
                <li>
                <i class="icon icon icon-list"></i>
                    <div class="name">宫格视图</div>
                    <div class="fontclass">.icon-list</div>
                </li>
            
                <li>
                <i class="icon icon icon-data-fill"></i>
                    <div class="name">用户资料</div>
                    <div class="fontclass">.icon-data-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-data"></i>
                    <div class="name">用户资料-线性</div>
                    <div class="fontclass">.icon-data</div>
                </li>
            
                <li>
                <i class="icon icon icon-unlock"></i>
                    <div class="name">解锁</div>
                    <div class="fontclass">.icon-unlock</div>
                </li>
            
                <li>
                <i class="icon icon icon-lock"></i>
                    <div class="name">锁定</div>
                    <div class="fontclass">.icon-lock</div>
                </li>
            
                <li>
                <i class="icon icon icon-show"></i>
                    <div class="name">显示、可见</div>
                    <div class="fontclass">.icon-show</div>
                </li>
            
                <li>
                <i class="icon icon icon-hide"></i>
                    <div class="name">隐藏、不可见</div>
                    <div class="fontclass">.icon-hide</div>
                </li>
            
                <li>
                <i class="icon icon icon-share"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-share</div>
                </li>
            
                <li>
                <i class="icon icon icon-share-fill"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-share-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-like-fill"></i>
                    <div class="name">喜欢收藏</div>
                    <div class="fontclass">.icon-like-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-like"></i>
                    <div class="name">收藏喜欢</div>
                    <div class="fontclass">.icon-like</div>
                </li>
            
                <li>
                <i class="icon icon icon-label"></i>
                    <div class="name">label</div>
                    <div class="fontclass">.icon-label</div>
                </li>
            
                <li>
                <i class="icon icon icon-label-fill"></i>
                    <div class="name">label</div>
                    <div class="fontclass">.icon-label-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-guide-fill"></i>
                    <div class="name">指南指导</div>
                    <div class="fontclass">.icon-guide-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-guide"></i>
                    <div class="name">指南指导</div>
                    <div class="fontclass">.icon-guide</div>
                </li>
            
                <li>
                <i class="icon icon icon-place-fill"></i>
                    <div class="name">位置</div>
                    <div class="fontclass">.icon-place-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-place"></i>
                    <div class="name">位置-线性</div>
                    <div class="fontclass">.icon-place</div>
                </li>
            
                <li>
                <i class="icon icon icon-upload"></i>
                    <div class="name">上传导出</div>
                    <div class="fontclass">.icon-upload</div>
                </li>
            
                <li>
                <i class="icon icon icon-download"></i>
                    <div class="name">下载导入</div>
                    <div class="fontclass">.icon-download</div>
                </li>
            
                <li>
                <i class="icon icon icon-pc"></i>
                    <div class="name">PC台式机</div>
                    <div class="fontclass">.icon-pc</div>
                </li>
            
                <li>
                <i class="icon icon icon-mobile"></i>
                    <div class="name">Phone手机</div>
                    <div class="fontclass">.icon-mobile</div>
                </li>
            
                <li>
                <i class="icon icon icon-clock"></i>
                    <div class="name">闹钟</div>
                    <div class="fontclass">.icon-clock</div>
                </li>
            
                <li>
                <i class="icon icon icon-code"></i>
                    <div class="name">二维码</div>
                    <div class="fontclass">.icon-code</div>
                </li>
            
                <li>
                <i class="icon icon icon-daohang"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang</div>
                </li>
            
                <li>
                <i class="icon icon icon-lock-fill"></i>
                    <div class="name">锁定</div>
                    <div class="fontclass">.icon-lock-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-lock1"></i>
                    <div class="name">锁定</div>
                    <div class="fontclass">.icon-lock1</div>
                </li>
            
                <li>
                <i class="icon icon icon-address"></i>
                    <div class="name">address</div>
                    <div class="fontclass">.icon-address</div>
                </li>
            
                <li>
                <i class="icon icon icon-active"></i>
                    <div class="name">右下角勾选</div>
                    <div class="fontclass">.icon-active</div>
                </li>
            
                <li>
                <i class="icon icon icon-undo"></i>
                    <div class="name">undo</div>
                    <div class="fontclass">.icon-undo</div>
                </li>
            
                <li>
                <i class="icon icon icon-praise"></i>
                    <div class="name">好评</div>
                    <div class="fontclass">.icon-praise</div>
                </li>
            
                <li>
                <i class="icon icon icon-bad"></i>
                    <div class="name">差评</div>
                    <div class="fontclass">.icon-bad</div>
                </li>
            
                <li>
                <i class="icon icon icon-praise-circle"></i>
                    <div class="name">好评-圆框</div>
                    <div class="fontclass">.icon-praise-circle</div>
                </li>
            
                <li>
                <i class="icon icon icon-bad-circle"></i>
                    <div class="name">差评-圆框</div>
                    <div class="fontclass">.icon-bad-circle</div>
                </li>
            
                <li>
                <i class="icon icon icon-yiban"></i>
                    <div class="name">一般</div>
                    <div class="fontclass">.icon-yiban</div>
                </li>
            
                <li>
                <i class="icon icon icon-bumanyi"></i>
                    <div class="name">不满意</div>
                    <div class="fontclass">.icon-bumanyi</div>
                </li>
            
                <li>
                <i class="icon icon icon-manyi"></i>
                    <div class="name">满意</div>
                    <div class="fontclass">.icon-manyi</div>
                </li>
            
                <li>
                <i class="icon icon icon-chart"></i>
                    <div class="name">报表-线性</div>
                    <div class="fontclass">.icon-chart</div>
                </li>
            
                <li>
                <i class="icon icon icon-chart-fill"></i>
                    <div class="name">报表</div>
                    <div class="fontclass">.icon-chart-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-chart-pie"></i>
                    <div class="name">饼图-线性</div>
                    <div class="fontclass">.icon-chart-pie</div>
                </li>
            
                <li>
                <i class="icon icon icon-chart-pie-fill"></i>
                    <div class="name">饼图</div>
                    <div class="fontclass">.icon-chart-pie-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-chart-block"></i>
                    <div class="name">条形图-线性</div>
                    <div class="fontclass">.icon-chart-block</div>
                </li>
            
                <li>
                <i class="icon icon icon-chart-block-fill"></i>
                    <div class="name">条形图</div>
                    <div class="fontclass">.icon-chart-block-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-chart-line"></i>
                    <div class="name">折线图-线性</div>
                    <div class="fontclass">.icon-chart-line</div>
                </li>
            
                <li>
                <i class="icon icon icon-chart-line-fill"></i>
                    <div class="name">折线图</div>
                    <div class="fontclass">.icon-chart-line-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-star-half"></i>
                    <div class="name">半颗星</div>
                    <div class="fontclass">.icon-star-half</div>
                </li>
            
                <li>
                <i class="icon icon icon-star"></i>
                    <div class="name">星星</div>
                    <div class="fontclass">.icon-star</div>
                </li>
            
                <li>
                <i class="icon icon icon-star-fill"></i>
                    <div class="name">星星</div>
                    <div class="fontclass">.icon-star-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-cloud"></i>
                    <div class="name">cloud</div>
                    <div class="fontclass">.icon-cloud</div>
                </li>
            
                <li>
                <i class="icon icon icon-cloud-fill"></i>
                    <div class="name">cloud-fill</div>
                    <div class="fontclass">.icon-cloud-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-vip"></i>
                    <div class="name">会员</div>
                    <div class="fontclass">.icon-vip</div>
                </li>
            
                <li>
                <i class="icon icon icon-hot"></i>
                    <div class="name">热销</div>
                    <div class="fontclass">.icon-hot</div>
                </li>
            
                <li>
                <i class="icon icon icon-new"></i>
                    <div class="name">新</div>
                    <div class="fontclass">.icon-new</div>
                </li>
            
                <li>
                <i class="icon icon icon-gift"></i>
                    <div class="name">礼物</div>
                    <div class="fontclass">.icon-gift</div>
                </li>
            
                <li>
                <i class="icon icon icon-coupon"></i>
                    <div class="name">优惠券</div>
                    <div class="fontclass">.icon-coupon</div>
                </li>
            
                <li>
                <i class="icon icon icon-zh"></i>
                    <div class="name">中文模式</div>
                    <div class="fontclass">.icon-zh</div>
                </li>
            
                <li>
                <i class="icon icon icon-en"></i>
                    <div class="name">英文模式</div>
                    <div class="fontclass">.icon-en</div>
                </li>
            
                <li>
                <i class="icon icon icon-rmb"></i>
                    <div class="name">我的资产</div>
                    <div class="fontclass">.icon-rmb</div>
                </li>
            
                <li>
                <i class="icon icon icon-document-fill"></i>
                    <div class="name">document</div>
                    <div class="fontclass">.icon-document-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-document"></i>
                    <div class="name">document</div>
                    <div class="fontclass">.icon-document</div>
                </li>
            
                <li>
                <i class="icon icon icon-edit"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon icon icon-edit-fill"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-pencil-fill"></i>
                    <div class="name">pencil</div>
                    <div class="fontclass">.icon-pencil-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-pencil"></i>
                    <div class="name">pencil</div>
                    <div class="fontclass">.icon-pencil</div>
                </li>
            
                <li>
                <i class="icon icon icon-edit-new"></i>
                    <div class="name">编辑</div>
                    <div class="fontclass">.icon-edit-new</div>
                </li>
            
                <li>
                <i class="icon icon icon-del-fill"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-del-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-del"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-del</div>
                </li>
            
                <li>
                <i class="icon icon icon-save-fill"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.icon-save-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-save"></i>
                    <div class="name">保存-线性</div>
                    <div class="fontclass">.icon-save</div>
                </li>
            
                <li>
                <i class="icon icon icon-user1"></i>
                    <div class="name">用户名</div>
                    <div class="fontclass">.icon-user1</div>
                </li>
            
                <li>
                <i class="icon icon icon-user-fill1"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-user-fill1</div>
                </li>
            
                <li>
                <i class="icon icon icon-pwd-fill"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-pwd-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-pwd"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-pwd</div>
                </li>
            
                <li>
                <i class="icon icon icon-code-fill"></i>
                    <div class="name">验证码</div>
                    <div class="fontclass">.icon-code-fill</div>
                </li>
            
                <li>
                <i class="icon icon icon-code1"></i>
                    <div class="name">验证码</div>
                    <div class="fontclass">.icon-code1</div>
                </li>
            
                <li>
                <i class="icon icon icon-phone1"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-phone1</div>
                </li>
            
                <li>
                <i class="icon icon icon-zhengque"></i>
                    <div class="name">天猫提示-正确</div>
                    <div class="fontclass">.icon-zhengque</div>
                </li>
            
                <li>
                <i class="icon icon icon-arw-top"></i>
                    <div class="name">箭头-向右</div>
                    <div class="fontclass">.icon-arw-top</div>
                </li>
            
                <li>
                <i class="icon icon icon-arw-down"></i>
                    <div class="name">箭头-向右</div>
                    <div class="fontclass">.icon-arw-down</div>
                </li>
            
                <li>
                <i class="icon icon icon-arw-left"></i>
                    <div class="name">箭头-向右</div>
                    <div class="fontclass">.icon-arw-left</div>
                </li>
            
                <li>
                <i class="icon icon icon-xiangzuo"></i>
                    <div class="name">向右</div>
                    <div class="fontclass">.icon-xiangzuo</div>
                </li>
            
                <li>
                <i class="icon icon icon-jikediancanicon13"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jikediancanicon13</div>
                </li>
            
                <li>
                <i class="icon icon icon-jikediancanicon131"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jikediancanicon131</div>
                </li>
            
                <li>
                <i class="icon icon icon-sort-up"></i>
                    <div class="name">排序</div>
                    <div class="fontclass">.icon-sort-up</div>
                </li>
            
                <li>
                <i class="icon icon icon-start"></i>
                    <div class="name">发</div>
                    <div class="fontclass">.icon-start</div>
                </li>
            
                <li>
                <i class="icon icon icon-end"></i>
                    <div class="name">到</div>
                    <div class="fontclass">.icon-end</div>
                </li>
            
                <li>
                <i class="icon icon icon-monitor"></i>
                    <div class="name">index</div>
                    <div class="fontclass">.icon-monitor</div>
                </li>
            
                <li>
                <i class="icon icon icon-yw"></i>
                    <div class="name">yw</div>
                    <div class="fontclass">.icon-yw</div>
                </li>
            
                <li>
                <i class="icon icon icon-aq"></i>
                    <div class="name">aq</div>
                    <div class="fontclass">.icon-aq</div>
                </li>
            
                <li>
                <i class="icon icon icon-link"></i>
                    <div class="name">link</div>
                    <div class="fontclass">.icon-link</div>
                </li>
            
                <li>
                <i class="icon icon icon-layout"></i>
                    <div class="name">layout</div>
                    <div class="fontclass">.icon-layout</div>
                </li>
            
                <li>
                <i class="icon icon icon-fenzu"></i>
                    <div class="name">分组</div>
                    <div class="fontclass">.icon-fenzu</div>
                </li>
            
                <li>
                <i class="icon icon icon-chevron-down1"></i>
                    <div class="name">箭头-向下</div>
                    <div class="fontclass">.icon-chevron-down1</div>
                </li>
            
                <li>
                <i class="icon icon icon-diyiye"></i>
                    <div class="name">第一页</div>
                    <div class="fontclass">.icon-diyiye</div>
                </li>
            
                <li>
                <i class="icon icon icon-arrLeft-fill"></i>
                    <div class="name">三角下标（正方形）</div>
                    <div class="fontclass">.icon-arrLeft-fill</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">icon</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"icon"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
